<template>
  <view>
    <!-- 1.0 导航栏 -->
    <nav-bar></nav-bar>

    <!-- 2.0 轮播图 -->
    <swiper
      class="slideshow"
      autoplay
      circular
      indicator-dots="true"
      indicator-active-color="red"
    >
      <swiper-item v-for="item in navigatorList" :key="item.goods_id">
        <navigator>
          <image :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 3.0 分类 -->
    <view class="category">
      <navigator v-for="item in category" :key="item.name">
        <image :src="item.image_src" mode="widthFix"></image>
      </navigator>
    </view>

    <!-- 4.0 楼层 -->
    <view class="floor">
      <!-- 楼层盒子 -->
      <view class="floor_group" v-for="item in floor" :key="item.name">
        <!-- 楼层标题 -->
        <view class="floor_group_title">
          <image :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>

        <!-- 楼层内容 -->
        <view class="floor_group_content">
          <navigator
            v-for="(item2, index2) in item.product_list"
            :key="item2.name"
          >
            <image
              :src="item2.image_src"
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
            ></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/Navbar";
export default {
  components: {
    NavBar
  },

  data() {
    return {
      navigatorList: [], // 轮播图数据
      category: [], // 分类数据
      floor: [] //楼层数据
    };
  },
  async onLoad() {
    // // 封装前
    // uni.showLoading({
    //   title:"加载中",
    //   mask:true
    // });

    // // this.getSwiper();
    // // this.getCategory();
    // // this.getFloor();

    // // 封装前
    // Promise.all([this.getSwiper(), this.getCategory(), this.getFloor()]).then(() => {
    //   uni.hideLoading();
    // });

    // 封装后
    this.requestAll([this.getSwiper(), this.getCategory(), this.getFloor()])
  },
  methods: {
    getSwiper() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        success: res => {
          // console.log(res);
          const { message } = res.data;
          this.navigatorList = message;
        }
      });
    },

    getCategory() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
        success: res => {
          // console.log(111,res);
          const { message } = res.data;
          this.category = message;
        }
      });
    },

    getFloor() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
        success: res => {
          console.log(222, res);
          const { message } = res.data;
          this.floor = message;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.slideshow {
  height: 340rpx;
}

.category {
  display: flex;
  navigator {
    flex: 1;
    padding: 30rpx;
  }
}

.floor {
  margin-top: 10rpx;
  .floor_group {
    margin-bottom: 30rpx;
    .floor_group_title {
    }
  }
}

.floor_group_content {
  overflow: hidden;
  image {
    width: 33.33%;
    float: left;
    border: 3px solid #fff;
    &:nth-child(n) {
      height: 196rpx;
    }
  }
}
</style>
